<!--
 * @Author: 一路向阳 tt_sunzhenfeng@163.com
 * @Date: 2024-05-31 21:44:52
 * @LastEditors: 一路向阳 tt_sunzhenfeng@163.com
 * @LastEditTime: 2024-06-03 23:37:13
 * @FilePath: \vue3_upload_file\vue3_upload_demo\src\pages\Source\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="source-page-container">
    <div class="source-list-container">
      <el-table :data="files" border style="width: 100%" max-height="700px">
        <el-table-column prop="id" label="ID" width="75" align="center" />
        <el-table-column prop="name" label="文件名" width="250" align="center" />
        <el-table-column prop="url" label="图片预览" align="center">
          <template #default="{ row }">
            <el-image style="width: 240px; height: 150px" :src="headCover(row.url)" />
          </template>
        </el-table-column>
        <el-table-column prop="count" label="图片数量" width="250" align="center" />
        <el-table-column label="操作" width="120" align="center">
          <template #default="{ row }">
            <el-button size="small" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="source-page-container">
        <el-pagination v-model:current-page="pageConfig.pageNo" v-model:page-size="pageConfig.pageSize"
          :page-sizes="[10, 20, 50, 100]" layout="sizes, prev, pager, next" :total="pageConfig.count"
          @change="handlePageChange" />
      </div>
    </div>

  </div>
</template>

<script setup>
import _ from 'lodash-es';
import { ref, onMounted, reactive } from 'vue';

import { getFilesList } from '@/api/upload';



const files = ref([]);
const pageConfig = reactive({
  pageNo: 1,
  pageSize: 10,
  count: 0
});

const initLoadData = async () => {
  const { success, data, count } = await getFilesList({ pageNo: pageConfig.pageNo, pageSize: pageConfig.pageSize });
  if (success) {
    files.value = data;
    pageConfig.count = count;
  }
}

// 展示首个预览图
const headCover = urls => {
  if (urls && (urls.includes("[") || urls.includes("]"))) {
    const headNode = _.head(JSON.parse(urls));
    console.log(headNode, 64);
    return headNode;
  }
  return urls;
}

const handleDelete = item => { }

const handlePageChange = (pageNo, pageSize) => {
  pageConfig.pageNo = pageNo;
  pageConfig.pageSize = pageSize;
  initLoadData();
}


onMounted(() => initLoadData());
</script>

<style lang="less" scoped>
.source-page-container {
  width: 100%;
  height: 100%;
  @apply bg-white rounded p-5;

  .data-source-container {
    width: 100%;
    height: 300px;
    @apply bg-blue-700;
  }

  .source-page-container {
    width: 100%;

    @apply py-5 flex justify-end;
  }
}

.el-image {
  border-radius: 5px;
  background-color: #585757;
}

:deep(.el-image__inner) {
  object-fit: contain;
}
</style>